<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>无序列表_内部样式</title>
		<!-- css内部样式写法 -->
		<style type="text/css">
			/* 标签选择器 */
			/* ul{
				list-style: none;
				background-color: blue;
			}
			li{
				
			} */
			/* css和id选择器 */
			#one {
				display: inline;
				background-color: lightyellow;
				
				
			}
			.first{
				background-color: red;
				
			}
			.ul{
				background-color: aqua;
			}
			/* id选择器优先级>class选择器>标签选择器 */
			
			.li{
				display: inline;
			}
			#two {
				list-style: none;
				background-color: lightblue;
				/* #two li 后代选择器
				   #two+li 相邻兄弟选择器
				   #tw,li 并集选择器
				   .ul02.u 交集选择器
				 */
			}
			#two li{
				display: inline;
			}
		</style>
		
	</head>
	<body>
		<h1>起床以后需要做的事</h1>
		<ul id="one" class="first">
			<li class="li"><strong>睁眼</strong></li>
			<li class="li"><strong>穿衣服</strong></li>
			<li class="li"><strong>上厕所</strong></li>
			<li class="li"><strong>吃早饭</strong></li>
			<li class="li"><strong>洗漱</strong></li>
			<li class="li"><strong>出门</strong></li>
		</ul>
		
		<h1>起床以后需要做的事</h1>
		<ul id="two">
			<li><strong>睁眼</strong></li>
			<li><strong>穿衣服</strong></li>
			<li><strong>上厕所</strong></li>
			<li><strong>吃早饭</strong></li>
			<li><strong>洗漱</strong></li>
			<li><strong>出门</strong></li>
		</ul>
	</body>
</html>
